<template>
	<div class="login">
		<!-- ref属性：获取form表单的所有数据对象	获取某个控件的数据对象：this.$refs.xxxx -->
		<!-- model属性：表单数据对象，表单内的控件的v-model所绑定的数据==>data函数 -->
		<el-form ref="form" :model="form" label-width="150px">
			<el-form-item lable="账号">
				<el-input v-model="form.username"></el-input>
			</el-form-item>
			<el-form-item lable="密码">
				<el-input v-model="form.password" type="password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type='primary' @click='toLogin()'>登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
// 引入拦截器
import instance from '../../../ajax/index.js';
export default{
	name: 'Login',
	data(){
		return{
			form : {
				username : '',
				password : '',
				grant_type : 'password',	//获取token来用密码模式
				client_id : 'sobook4',		//应用ID
				client_secret : '444444'	//密钥
			}
		}
	},
	methods:{
		// 登录函数
		toLogin(){
			// 备份
			let that = this;
			//将即将post请求的数据，通过qs插件进行格式转换
			let login = this.$qs.stringify( this.form );
			// 发起post请求
			/* 请求地址:		http://127.0.0.1:8093/oauth/token
				提交的数据	qs打包成JSON字符串
				配置请求头/表头headers	application/x-www-form-urlencoded 【数据作为地址栏参数提交】
			*/
		  instance.post('/oauth/token',login,{
			   headers : {'Content-Type' : 'application/x-www-form-urlencoded' }
		   } ).then( (res)=>{
			// 将请求成功的token存入本地存储中
			localStorage.setItem( 'token' , res.data.access_token );
			
			// get请求：当前登录者的数据
			instance.get('/api/info/getUser').then( (res)=>{
				console.log(res);
			}).catch( (err)=>{
				// console.log(err);
			   })
		   }).catch( (error)=>{
				// console.log(err);
		   })
		}
	}
}
</script>

<style scoped>
.login{
	width: 600px;
}
/* 如果框架内需要修改样式的选择器是通过js生成的，那么都需要通过穿透才能实现效果 */
/* 框架内的选择器是组件名过着本身存在的，直接在选择器内修改即可 */
.login .el-form-item :deep(.el-form-item_lable){
	text-align: center;
}
</style>
